<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <script src="./js/echarts/echarts.5.0.0.js"></script>
    <script src="./js/echarts/theme/shine.js"></script>
    <title>ECharts多系列案例</title>
</head>
<style>
    #chart-1, #chart-2 {
        width: 800px;
        height: 400px;
        display: inline-block;
    }
</style>
<body>
<div id="chart-1"></div>
<div id="chart-2"></div>
</body>
<script>

    /**
     * 多系列图表(老的写法)
     */
    echarts.init(document.getElementById("chart-1"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts多系列案例',
            subtext: '多系列'
        },
        // 类型展示，需要和series每项的name做关联，否则无法展示
        legend: {
            data: [{
                name: '分类',
                icon: 'circle',
                textStyle: {
                    color: 'red'
                }
            }, '折线图', '柱状图'],
            left: 300
        },
        // hover
        tooltip: {
            backgroundColor: '#fff'
        },
        // 图表的位置
        grid: {
            top: 100,
            left: '10%',
            right: '10%',
            bottom: 100
        },
        // 工具
        toolbox: {
            right: 25,
            feature: {
                saveAsImage: {
                    title: '保存为图片'
                },
                restore: {
                    title: '刷新',
                },
                // 放大、 重置
                dataZoom: {
                    yAxisIndex: false,
                    title: {
                        zoom: '区域缩放',
                        back: '区域缩放还原'
                    }
                }
            }
        },
        // 范围
        dataZoom: [
            {
                show: true,
            }
        ],
        // x轴数据
        xAxis: {
            data: ['一季度', '二季度', '三季度', '四季度']
        },
        // y轴数据
        yAxis: {},
        // 多个图标展示样式
        series: [
            {
                name: '柱状图', // 关联legen dname
                type: 'bar',
                data: [10, 100, 120, 150]
            },
            {
                name: '折线图',
                type: 'line',
                data: [100, 120, 90, 150]
            }, {
                name: '分类',
                type: 'pie',
                center: ['65%', 60], // 坐标x,y
                radius: 35, // 半径
                data: [
                    {value: 535, name: '一季度'},
                    {value: 510, name: '二季度'},
                    {value: 634, name: '三季度'},
                    {value: 735, name: '四季度'}]
            }
        ]

    })


    /**
     * 多系列图表(新的写法)
     */
    echarts.init(document.getElementById("chart-2"), "shine", {renderer: "svg"}).setOption({
        title: {
            text: 'ECharts多系列案例',
            subtext: '多系列'
        },
        // 类型展示，需要和series每项的name做关联，否则无法展示
        legend: {
            data: [{
                name: '分类',
                icon: 'circle',
                textStyle: {
                    color: 'red'
                }
            }, '折线图', '柱状图'],
            left: 300
        },
        // hover
        tooltip: {
            backgroundColor: '#fff'
        },
        // 图表的位置
        grid: {
            top: 100,
            left: '10%',
            right: '10%',
            bottom: 100
        },
        // 工具
        toolbox: {
            right: 25,
            feature: {
                saveAsImage: {
                    title: '保存为图片'
                },
                restore: {
                    title: '刷新',
                },
                // 放大、 重置
                dataZoom: {
                    yAxisIndex: false,
                    title: {
                        zoom: '区域缩放',
                        back: '区域缩放还原'
                    }
                }
            }
        },
        // 范围
        dataZoom: [
            {
                show: true,
            }
        ],
        // 数据源
        dataset: {
            // 纵队(竖着)
            source: [
                ['一季度', 10, 100, '分类1', 50],
                ['二季度', 100, 120, '分类2', 60],
                ['三季度', 120, 90, '分类3', 55],
                ['四季度', 150, 150, '分类4', 70],
            ],
        },
        // x轴数据
        xAxis: {
            data: ['一季度', '二季度', '三季度', '四季度']
        },
        // y轴数据
        yAxis: {},
        // 多个图标展示样式
        series: [
            {
                name: '柱状图', // 关联legen dname
                type: 'bar',
                // data: [10, 100, 120, 150]
                encode: {x: 0, y: 1}, // x  需要和xAxis.data 一致
            },
            {
                name: '折线图',
                type: 'line',
                // data: [100, 120, 90, 150]
                encode: {x: 0, y: 2}, // x  需要和xAxis.data 一致
            }, {
                name: '分类',
                type: 'pie',
                center: ['65%', 60], // 坐标x,y
                radius: 35, // 半径
                // data: [
                //     {value: 535, name: '一季度'},
                //     {value: 510, name: '二季度'},
                //     {value: 634, name: '三季度'},
                //     {value: 735, name: '四季度'}
                // ],
                encode: {itemName: 3, value: 4},
            }
        ]

    })


</script>
</html>
